{extend name='common/common' /}

{block name="content"}
<el-row :gutter="20">
	<el-col :md="16">
		<div class="ibox-title">
		    <h5>站点代买/销售商品类别
				<div class="top-btn-box">
					{if authCheck('goods/addcate')}
					<el-button
						type="primary" plain size="small"
						icon="el-icon-plus" @click="addTopRow">
						添加商品大类
					</el-button>
					{/if}
				</div>
			</h5>
		</div>
		<div class="ibox-content">
			<el-table
				:data="tableData" border
				:span-method="objectSpanMethod">
				<el-table-column align="center" prop="belonged_name" label="商品大类">
					<template slot-scope="scope">
						{{scope.row.belonged_name}}<br>
						{if authCheck('goods/addcate')}
						<el-button
							size="mini" plain icon="el-icon-plus"
							type="primary" circle
							@click="addRow(scope.row)">
						</el-button>
						{/if}
						{if authCheck('goods/editcate')}
						<el-button
							size="mini" plain icon="el-icon-edit"
							type="success" circle
							@click="editTopRow(scope.row)">
						</el-button>
						{/if}
						{if authCheck('goods/delcate')}
						<el-button
							size="mini" plain icon="el-icon-delete"
							type="danger" circle
							@click="delRow(scope.row,1)">
						</el-button>
						{/if}
					</template>
				</el-table-column>
				<el-table-column prop="name" label="具体类别"></el-table-column>
				<el-table-column align="center" prop="commid" label="代买编码" width="100"></el-table-column>
				<el-table-column align="center" prop="commid_2" label="代卖编码" width="100"></el-table-column>
				{if authCheck('goods/editcate') || authCheck('goods/delcate')}
				<el-table-column label="操作" align="center">
					<template slot-scope="scope">
						{if authCheck('goods/editcate')}
						<el-button
							size="mini" plain icon="el-icon-edit"
							type="success"
							@click="editRow(scope.row)">
						</el-button>
						{/if}
						{if authCheck('goods/delcate')}
						<el-button
							size="mini" plain icon="el-icon-delete"
							type="danger"
							@click="delRow(scope.row,0)">
						</el-button>
						{/if}
					</template>
				</el-table-column>
				{/if}
			</el-table>
		</div>
	</el-col>
</el-row>
{/block}

{block name="component"}
<div id="topFormBox">
	<el-dialog :title="title" :visible.sync="showTopForm" top="5vh">
		<div class="formBox">
			<el-form :model="topForm" :rules="rules" ref="topForm" label-width="100px">
				<el-form-item label="类别名称" prop="name">
					<el-input v-model="topForm.name"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showTopForm = false">取消</el-button>
			<el-button type="success" @click="subForm">保存</el-button>
		</div>
	</el-dialog>
</div>
<div id="sonFormBox">
	<el-dialog :title="title" :visible.sync="showSonForm" top="5vh">
		<div class="formBox">
			<el-form :model="sonForm" :rules="rules" ref="sonForm" label-width="100px">
				<el-form-item label="类别名称" prop="name">
					<el-input v-model="sonForm.name"></el-input>
				</el-form-item>
				<el-form-item label="商品类别" prop="belonged_name">
					<el-input v-model="sonForm.belonged_name" disabled></el-input>
				</el-form-item>
				<el-form-item label="代买编码" prop="commid">
					<el-input v-model="sonForm.commid"></el-input>
				</el-form-item>
				<el-form-item label="代卖编码" prop="commid_2">
					<el-input v-model="sonForm.commid_2"></el-input>
				</el-form-item>
			</el-form>
		</div>
		<div slot="footer" class="dialog-footer">
			<el-button @click="showSonForm = false">取消</el-button>
			<el-button type="success" @click="subForm">保存</el-button>
		</div>
	</el-dialog>
</div>
{/block}

{block name="script"}
<script type="text/javascript">
var main = new Vue({
	el:"#main",
	data() {
		return {
			loading:false,
			tableData:'',
		}
	},
	mounted:function (){
		this.getTable();
	},
	methods:{
		getTable() {
			this.loading=true;
			$.post('./cate',function(res){
				main.loading = false;
				if(res.code == 1){
					main.tableData = res.data;
					main.$message({
			          message: res.msg,
			          type: 'success'
			        });
				}else{
					main.$notify.error({
						title: '失败',
						message: res.msg,
					});
				}
			});
		},
		objectSpanMethod({row,column,rowIndex,columnIndex}){
			if (columnIndex === 0) {
				if (row.rowspan == 'false') {
					return {rowspan:row.row_num,colspan:1};
				}else{
					return {rowspan:0,colspan:0};
				}
			}
		},
		editRow(row) {
			sonFormBox.submitype = 'edit';
			sonFormBox.showSonForm = true;
			sonFormBox.sonForm.id = row.id;
			sonFormBox.sonForm.pid = row.pid;
			sonFormBox.sonForm.belonged_name = row.belonged_name;
			sonFormBox.sonForm.name = row.name;
			sonFormBox.sonForm.commid = row.commid;
			sonFormBox.sonForm.commid_2 = row.commid_2;
		},
		delRow(row,is_top) {
			if(is_top == 1){
				var param = {
					id:row.pid,
					is_top:is_top
				}
			}else{
				var param = {
					id:row.id,
					pid:row.pid,
					is_top:is_top
				}
			}
			this.$confirm('此操作将永久删除该类别, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				$.post('./delcate',param,function(res){
					if(res.code == '1'){
						main.$notify({
							title:"成功",
							type:"success",
							message:res.msg
						});
						main.getTable();
					}else{
						main.$notify.error({
							title:"错误",
							message:res.msg
						})
					}
				})
			}).catch(() => {
				this.$notify.info({
					title: '消息',
					message: '已取消删除'
				});
			});
		},
		addRow(row) {
			sonFormBox.submitype = 'add';
			sonFormBox.showSonForm = true;
			sonFormBox.sonForm.id = 0;
			sonFormBox.sonForm.pid = row.pid;
			sonFormBox.sonForm.belonged_name = row.belonged_name;
			sonFormBox.sonForm.name = '';
			sonFormBox.sonForm.commid = '';
			sonFormBox.sonForm.commid_2 = '';
		},
		addTopRow() {
			topFormBox.submitype = 'add';
			topFormBox.topForm.name = '';
			topFormBox.topForm.pid = 0;
			topFormBox.showTopForm = true;
			topFormBox.title = "添加商品大类";
		},
		editTopRow(row) {
			topFormBox.submitype = 'edit';
			topFormBox.topForm.name = row.belonged_name;
			topFormBox.topForm.pid = row.pid;
			topFormBox.showTopForm = true;
			topFormBox.title = "编辑商品大类";
		}
  	},
});
var topFormBox = new Vue({
	el:"#topFormBox",
	data() {
		return {
			showTopForm:false,
			title:'商品大类',
			topForm:{
				name:'',pid:0,is_top:1
			},
			submitype:'add',
			rules:{
				name:[{required:true,message:'请输入分类名称',trigger:['blur','change']}],
			}
		}
	},
	methods:{
		subForm() {
			if(this.submitype == 'add'){
				var url = '{:url("goods/addcate")}';
			}else{
				var url = '{:url("goods/editcate")}';
			}
			var param = this.topForm;
			this.$refs['topForm'].validate((valid) => {
				if(valid) {
					$.post(url,param,function(res){
						if(res.code == 1){
							topFormBox.showTopForm = false;
							main.$notify({
								title:"成功",
								type:"success",
								message:res.msg
							});
							main.getTable();
						}else{
							main.$notify.error({
								title:"错误",
								message:res.msg
							})
						}
					})
				}
			})
		}
	}
});
var sonFormBox = new Vue({
	el:"#sonFormBox",
	data() {
		return {
			title:"具体类别",
			showSonForm:false,
			sonForm:{
				pid:0,belonged_name:'',name:'',
				commid:'',commid_2:'',is_top:0
			},
			submitype:'add',
			rules:{
				name:[{required:true,message:'请输入分类名称',trigger:['blur','change']}],
				commid:[{required:true,message:'请输入代买编码',trigger:['blur','change']}],
				commid_2:[{required:true,message:'请输入代卖编码',trigger:['blur','change']}],
			}
		}
	},
	methods:{
		subForm() {
			if(this.submitype == 'add'){
				var url = '{:url("goods/addcate")}';
			}else{
				var url = '{:url("goods/editcate")}';
			}
			var param = this.sonForm;
			this.$refs['sonForm'].validate((valid) => {
				if(valid) {
					$.post(url,param,function(res){
						if(res.code == 1){
							sonFormBox.showSonForm = false;
							main.$notify({
								title:"成功",
								type:"success",
								message:res.msg
							});
							main.getTable();
						}else{
							main.$notify.error({
								title:"错误",
								message:res.msg
							})
						}
					})
				}
			})
		}
	}
})
</script>
{/block}
